{% extends "layout.html" %}
{% load static %}

{% block CSS %}
    <link rel="stylesheet" href="{% static 'css/posts.css' %}">
{% endblock %}

{% block content %}

    <div class="P_container">
        <div class="urlbutton" >
            <h3>勇敢说出自己的疑惑或见解吧</h3>
            <div class="buttondiv" onclick="location.href='{% url '发表帖子' categoryId %}'">
                <p>跳转</p>
            </div>
        </div>
        <div class="Posts_big_div">
            {% for post in Posts %}
                <div class="P_post_big" onclick="location.href='{% url '帖子内容' post.id %}'">
                    <div class="P_post_avatar">
                        <div class="P_avatar"><img src="/media/{{ post.UserId.avatar_url }}" alt=""></div>
                        <div class="P_name">
                            <p>{{ post.UserId.username }}</p>
                        </div>
                    </div>
                    <div class="P_others">
                        <div class="P_title">
                            <h3>{{ post.title }}</h3>
                        </div>
                        <div class="P_info">
                            <div class="P_tab_time">
                                {% if post.tags %}
                                    <p><strong>标签:</strong> {% for tag in post.tags_list %}
                                        {{ tag.name }}
                                        {% if not forloop.last %} &nbsp; {% endif %}
                                    {% endfor %}
                                    </p>
                                {% endif %}
                                <p>{{ post.publishTime }}</p>
                            </div>
                            <div class="P_min_div">
                                <p>浏览量</p>
                                <p>{{ post.browseNumber }}</p>
                            </div>
                            <div class="P_min_div">
                                <p>回复量</p>
                                <p>{{ post.replyNumber }}</p>
                            </div>
                            <div class="P_min_div">
                                <p>点赞量</p>
                                <p>{{ post.likeNumber }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    <style>
        .P_container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: auto; /* 页面高度的80% */
            font-family: Arial, sans-serif;
            position: relative; /* 添加绝对定位 */
            top: 10px;
            width: 53.2%;
            margin: 0 auto; /* 居中显示 */
        }

        .urlbutton {
            width: 100%; /* 占据container的宽度 */
            max-width: 100%;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加立体感阴影 */
            position: relative;
            background-color: #eee9b6; /* 蓝色背景 */
            margin-bottom: 10px;
        }


        .Posts_big_div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: auto; /* 页面高度的80% */
            font-family: Arial, sans-serif;
            margin: auto; /* 在页面中居中 */
            position: relative; /* 添加绝对定位 */
            width: 100%;
            top: 10px;
        }

        .P_post_big {
            background-color: #eee9b6;;
            padding: 10px;
            margin-bottom: 10px; /* 下方间距为10px */
            display: flex;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加立体感阴影 */
            width: 100%; /* Posts_big_div */
            box-sizing: border-box;
            position: relative; /* 添加相对定位 */
        }
    </style>

    <script type="text/javascript">

    $(function () {
            setInterval(checkNewPosts, 60000); // 每 1 秒检查一次
        })

    function checkNewPosts() {
        // 发送 AJAX 请求,获取最新的评论数据
            $.ajax({
                url: '{% url '获取帖子' %}',
                type: 'POST',
                data:{
                    Category_id:{{ categoryId }},
                },
                success: function (response) {
                    console.log(response.status)
                    if (response.status) {
                        // 更新评论区的 HTML 内容
                        updatePosts(response.Posts);
                    } else {
                        // 处理错误情况
                        console.log('Error fetching new comments:', response.error);
                    }
                },
                error: function (xhr, errmsg, err) {
                    // 处理 AJAX 请求错误
                    console.log('AJAX Error:', err);
                }
            });
    }

    function updatePosts(newPosts) {
        // 清空原有的评论
        $('.Posts_big_div').empty();

        // 添加新的评论
        for (var i = 0; i < newPosts.length; i++) {

            let postId = newPosts[i].id;
            let tagsHtml = '';

            // 生成标签 HTML
            if (newPosts[i].tags_list.length > 0) {
                tagsHtml += '<p><strong>标签:</strong>';
                for (var j = 0; j < newPosts[i].tags_list.length; j++) {
                    let tag = newPosts[i].tags_list[j];
                    tagsHtml += ' ' + tag;
                }
                tagsHtml += '</p>';
            }

            var newPostHtml = `
            <div class="P_post_big" onclick="location.href='/remarkinfo/${postId}/'">
                    <div class="P_post_avatar">
                        <div class="P_avatar"><img src="/media/${newPosts[i].UserId.avatar_url}" alt=""></div>
                        <div class="P_name">
                            <p>${newPosts[i].UserId.username}</p>
                        </div>
                    </div>
                    <div class="P_others">
                        <div class="P_title">
                            <h3>${newPosts[i].title}</h3>
                        </div>
                        <div class="P_info">
                            <div class="P_tab_time">
                                ${tagsHtml}
                                <p>${newPosts[i].publishTime}</p>
                            </div>
                            <div class="P_min_div">
                                <p>浏览量</p>
                                <p>${newPosts[i].browseNumber}</p>
                            </div>
                            <div class="P_min_div">
                                <p>回复量</p>
                                <p>${newPosts[i].replyNumber}</p>
                            </div>
                            <div class="P_min_div">
                                <p>点赞量</p>
                                <p>${newPosts[i].likeNumber}</p>
                            </div>
                        </div>
                    </div>
                </div>
        `;

            // 将新的评论 HTML 插入到 remark_big_div 中
            $('.Posts_big_div').prepend(newPostHtml);
        }
    }
/*
    function redirectToPostPage(postId) {
        location.href = `/remarkinfo/${postId}/`;
    }
*/
    </script>
{% endblock %}



